<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('选择课程')"/>
</head>
<body class="white-bg">
<form class="form-horizontal m" id="form-student-apply" th:object="${teachingStudent}">
    <input name="studentId" th:field="*{studentId}" type="hidden">
    <input name="studentName" th:field="*{studentName}" type="hidden">
    <input id="schoolId" name="schoolId" th:field="*{schoolId}" type="hidden">
    <!--    <div class="row form-group">-->
    <!--        <label class="col-sm-3 control-label">学校:</label>-->
    <!--        <div class="col-sm-4">-->
    <!--            <select class="form-control" id="school">-->
    <!--                <option value="">请选择学校</option>-->
    <!--            </select>-->
    <!--        </div>-->
    <!--    </div>-->
    <div class="row form-group">
        <label class="col-sm-3 control-label">课程:</label>
        <div class="col-sm-4">
            <select class="form-control" id="course">
                <option value="">请选择课程</option>
            </select>
        </div>
    </div>
    <div class="row form-group">
        <label class="col-sm-3 control-label">课时:</label>
        <div class="col-sm-4">
            <select class="form-control" id="lessonCount">
                <option value="">请选择课时</option>
            </select>
        </div>
    </div>
    <div class="row form-group">
        <label class="col-sm-3 control-label">学费:</label>
        <div class="col-sm-4">
            <input class="form-control" id="lessonPrice">
        </div>
    </div>
</form>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: jquery-cxselect-js"/>
<script th:inline="javascript">
    $(document).ready(function () {//页面加载时运行此函数  放在最前端
        /* 二级联动 */
        $.ajax({
            url: ctx + "teaching/course/select",
            type: 'GET',
            success: function (data) {
                $("#course").empty();
                $("#course").append("<option value=''>请选择课程</option>");
                for (var i = 0; i < data.length; i++) {
                    $("#course").append("<option value='" + data[i].courseId + "'>" + data[i].name + "</option>");
                }
            }
        });
        $("#course").change(function () {//同上面一样
            $.ajax({
                url: ctx + "teaching/price/select",
                type: 'GET',
                data: {
                    courseId: $("#course").val(),
                    schoolId: $("#schoolId").val(),
                },
                success: function (data) {
                    $("#lessonCount").empty();
                    // $("#lessonPrice").empty();
                    $("#lessonCount").append("<option value=''>请选择课时</option>");
                    for (var i = 0; i < data.length; i++) {
                        $("#lessonCount").append("<option value='" + data[i].lessonCount + "'>" + data[i].lessonCount + "</option>");
                    }
                }
            });
        });

    });

    function submitHandler() {
        if ($.validate.form()) {
            apply();
            // $.modal.msgReload("报名成功",modal_status.SUCCESS);
        }
    }

    function apply() {
        var schoolId = $.common.trim($("input[id='schoolId']").val());
        var studentId = $.common.trim($("input[name='studentId']").val());
        var studentName = $.common.trim($("input[name='studentName']").val());
        var courseId = $.common.trim($("select[id='course']").val());
        var lessonCount = $.common.trim($("select[id='lessonCount']").val());
        var lessonRemain = $.common.trim($("select[id='lessonCount']").val());
        $.ajax({
            type: "post",
            url: ctx + "teaching/student/apply",
            async: false,
            data: {
                "studentId": studentId,
                "courseId": courseId,
                "schoolId": schoolId,
                "studentName": studentName,
                "lessonCount": lessonCount,
                "lessonRemain": lessonRemain,
            },
            success: function (r) {
                if (r.code==0){
                    refreshTab();
                    $.modal.close();
                    $.modal.alertSuccess("报名成功");
                }
            }
        });
    }

</script>
</body>
